<template>
  <div id="detail" :style="detailStyle">
    <!--渲染16颗星 划分为16个区域 稀疏随机补点闪烁 -->
    <div v-for="index of 16" :key="index">
      <Star :lag="randomLag()" :seq="index" />
    </div>
    <!-- 渲染6个运势标签 -->
    <div v-for="(item, key, index) in predict.description.yunshi" :key="key">
      <!-- 标签条 -->
      <Tag :seq="index + 1" :name="key" :level="item.level" :yunshi="item" />
    </div>
    <!-- 运势详解 -->
    <div id="textarea" class="center">
      <transition name="stretch">
        <!-- 弹出框 -->
        <Dialog
          v-if="show"
          :level="text.level"
          :text="text.text"
          :title="text.title"
          ref="dialog"
          :style="dialogStyle"
        />
      </transition>
    </div>
  </div>
</template>

<script>
import Star from './Star.vue'
import Tag from './Tag.vue'
import Dialog from './Dialog.vue'

import Predict from '../../module/zodiac/Predict.js'

export default {
  name: 'Detail',
  props: {
    zodiac: Object,
  },
  components: {
    Star,
    Tag,
    Dialog,
  },
  data: function() {
    return {
      // 弹出框动画
      show: false,

      // 详情的主界面样式
      detailStyle: {
        backgroundColor: '#fefefe',
        backgroundImage: '',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'top',
      },

      // 预测的运势
      predict: {
        description: {
          yunshi: {},
        },
      },

      // 单个运势详解
      text: {
        color: '',
        text: '',
        title: '',
      },

      // Dialog样式
      dialogStyle: {
        height: '',
      },
    }
  },
  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * Async Init
     * 数据初始化
     *
     * @return void
     */
    async init() {
      // 运势Dialog框伸长展示
      this.show = true
      // 修改运势框静态和动态的样式冲突
      setTimeout(
        function() {
          this.dialogStyle.height = '80%'
        }.bind(this),
        2010
      )

      this.styleBuild()
      this.predictBuild()
      this.defaultYunshiBuild()
    },

    /**
     * StyleBuild
     * 样式构建
     *
     * @return void
     */
    styleBuild() {
      this.detailStyle.backgroundImage = 'url(' + this.zodiac.background + ')'
      // this.detailStyle.backgroundSize = 'cover'
    },

    /**
     * PredictBuild
     * 构建预测
     *
     * @return void
     */
    predictBuild() {
      // 获取预测池(单例)
      let pool = this.$parent.pool
      // 获取预测并赋值
      this.predict = new Predict(pool).getPredict(this.zodiac)
    },

    /**
     * RandomLag
     * 随机获得滞后时间 1-2000
     *
     * @return Number
     */
    randomLag() {
      return Math.random * 2000
    },

    /**
     * DefaultTextBuild
     * 默认情况下优先构建最大运势
     *
     * @return void
     */
    defaultYunshiBuild() {
      let max = this.findMax()
      // 构建最大的运势
      this.yunshiBuild(max.key, max.value)
    },

    /**
     * YunshiBuild
     * 构建单个运势
     * 向Dialog传递信息
     *
     * @param yunshi <+Comment+>
     *
     * @return void
     */
    yunshiBuild(title, yunshi) {
      this.text.title = title
      this.text.text = yunshi.text
      this.text.level = yunshi.level
    },

    /**
     * FindMax
     * 找寻第一个最大的运势
     *
     * @return yunshi(max)
     */
    findMax() {
      // 初始化最大运势
      let maxKey = Object.keys(this.predict.description.yunshi)[0]
      let max = this.predict.description.yunshi[maxKey]
      // console.log(Object.keys(this.predict.description.yunshi)[0])
      // 遍历6个运势
      for (let key in this.predict.description.yunshi) {
        // 如果有比最大运势大的更新最大运势
        if (this.predict.description.yunshi[key].level > max.level) {
          maxKey = key
          max = this.predict.description.yunshi[key]
        }
      }
      // 返回key value格式的最大对象
      return {
        key: maxKey,
        value: max,
      }
    },
  },
}
</script>

<style scoped media="screen" lang="less">
/* 预定义属性 */

/* 节点属性 */
#detail {
  width: 100%;
  /* height: 40rem; */
  height: calc(100vh);
}

#textarea {
  width: inherit;
  height: 50%;
  top: 40%;
  position: absolute;
}

/* 效果类 */
/* 长度伸长 */
.stretch-enter {
  height: 0%;
}
.stretch-leave-to,
.stretch-enter-to {
  height: 80%;
}
.stretch-leave,
.stretch-enter-active {
  transition: all 2s;
}
.stretch-leave-active,

// 容器属性
/* 水平且垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
